<%@ include file="include.jsp" %>
<body>
	<h1>Hi there, How it is going?  </h1>
	<form:form id="save_user" action="/user/save_user" method="post" modelAttribute="user">
		<form:hidden path="id" />
		<table>
			<tr>
				<td><form:label id="firstNameLabel" path="firstName">First Name : </form:label></td>
				<td><form:input id="firstName" path="firstName" /></td>
			</tr>

			<tr>
				<td><form:label id="lastNameLabel" path="lastName">Last Name : </form:label></td>
				<td><form:input id="lastName" path="lastName" /></td>
			</tr>
			<tr>
				<td><form:label id="surNameLabel" path="surName">SurName : </form:label></td>
				<td><form:input id="surName" path="surName" /></td>
			</tr>
			<tr>
				<td><form:label id="emailLabel" path="email">Email : </form:label></td>
				<td><form:input id="email" path="email"/></td>
			</tr>
			<tr>
				<td><form:label id="passwordLabel" path="password">Password : </form:label></td>
				<td><form:password id="password" path="password"/></td>
			</tr>
		</table>
		<p id="error"></p>
		<input type="button" value="Save" onclick="checkValuesBeforeSubmit()" />
		<input type="reset" value="Cancel"/>
	</form:form>
</body>
<script type="text/javascript">
function checkValuesBeforeSubmit(){
	var isOk = true;
	if(document.getElementById("firstName").value.length == 0){
		document.getElementById("firstNameLabel").innerHTML = document.getElementById("firstNameLabel").innerHTML + "(*)";
		isOk = false;
	}
	if(document.getElementById("lastName").value.length == 0){
		document.getElementById("lastNameLabel").innerHTML = document.getElementById("lastNameLabel").innerHTML + "(*)";
		isOk = false;
	}
	if(document.getElementById("email").value.length == 0){
		document.getElementById("emailLabel").innerHTML = document.getElementById("emailLabel").innerHTML + "(*)";
		isOk = false;
	}
	
	if(isOk){
		document.forms["save_user"].submit();
	}
	else{
		document.getElementById("error").innerHTML = "You must fill in all this attributes with (*)";
	}
}
</script>
</html>
